<template>
    <div class="menu-container clearfix">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :default-active="activeMenu" background-color="#fff" text-color="#000" active-text-color="#209978"
            :collapse="isCollapse">

            <h3>{{ isCollapse ? '系统' : '医疗基金欺诈监测系统' }}</h3>
            <!-- <img :src="isCollapse ? '../assets/医疗保障_简.png' : '../assets/医疗保障.png'" class="logo" /> -->

            <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.path"
                :class="{ 'active': activeMenu === item.path }">
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>

            <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
                <template slot="title">
                    <i :class="`el-icon-${item.icon}`"></i>
                    <span slot="title">{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
                    <el-menu-item @click="clickMenu(subItem)" :index="subItem.path"
                        :class="{ 'active': activeMenu === subItem.path }">{{ subItem.label }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeMenu: '', // 记录当前激活菜单的索引或标识
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },

        // 点击菜单
        clickMenu(item) {
            console.log(item);

            if (this.$route.path !== item.path && !(this.$route.path === '/main/import' && (item.path === '/main'))) {
                // 跳转页面
                this.$router.push(item.path);
                // 发送标签
                this.$store.commit('setMenu', item);

                // 设置当前激活菜单的索引或标识
                this.activeMenu = item.path;
            }
        }
    },
    computed: {
        // 没有子菜单
        noChildren() {
            return this.menuData.filter(item => !item.children)
        },
        // 有子菜单
        hasChildren() {
            return this.menuData.filter(item => item.children)
        },
        // 是否折叠
        isCollapse() {
            return this.$store.state.tab.isCollapse
        },
        menuData() {
            return this.$store.state.router.isImported === true ? this.$store.state.router.menuData_import : this.$store.state.router.menuData_unimport;
        }
    },
    created() {
        // 设置当前激活菜单的索引或标识
        this.activeMenu = this.$route.path;
    },
    mounted() {
        // 监听路由变化
        this.$router.afterEach((to, from) => {
            this.activeMenu = to.path;
        });
    },
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.active {
    border-left: 5px solid #209978;
    /* 竖条样式 */
    background-color: #cde4de !important;
    /* 背景色 */
    color: #209978;
}

.el-menu {
    height: 100vh;
    border-right: none;

    h3 {
        text-align: center;
        line-height: 100%;
        font-size: 15px;
        color: #000;
        /* 字体颜色为黑色 */
    }

    .logo {
        max-width: 90%;
        max-height: 90%;
        display: block;
        margin: 10px;
    }
}
</style>